<template>
<div style="height: 100%;">
        <el-drawer
    class="dialog"
    v-model="props.dialogVisible"
    title="咨询框"
    top="5vh"
    :before-close="handleClose"
  >
    <div class="content">
        <div class="exhibitionArea">
      <div v-for="(item,index) in dialogArray?.messageAry" :key="index" :class="{dialogRight:item.isAdmin,dialogLeft:!item.isAdmin}">
          <span>{{ getData(item.Date) }}</span>
          <span>{{ item.message }}</span>
      </div>
    </div>
    <div class="footer">
      <div class="input">
        <el-input
      v-model.trim="input"
      placeholder="请输入您想咨询的问题"
      ></el-input>
      <el-button 
        type="primary" 
        plain
        @click="handleSubmit"
        >
        点击发送</el-button>
      </div>
    </div>
    </div>
  </el-drawer>
</div>
</template>

<script setup>
import { defineProps ,defineEmits,reactive,ref,onMounted,watch} from 'vue';
import dayjs from 'dayjs';
import {Guidances} from '@/api/guidances'
import { ElMessage } from 'element-plus'
// 接收父组件传值
const props = defineProps({
    dialogVisible:false, // 是否展示
    orderFormInitial:{}, //弹框默认信息
    userName:'' //用户名
})
// 子传父的方法
const emits = defineEmits(['dialogShow'])
// 输入框中的值
let input = ref('')
// 对话数组数据
let dialogArray = ref([])
// 对时间戳样式进行转换
const getData = (n) =>{
return dayjs(n).format('YYYY-MM-DD HH:mm:ss')
}
// 点击关闭的回调函数
const handleClose = () => {
    input.value = ''
    emits('dialogShow',false)
}
// 点击发送时的回调
const handleSubmit = async ()=>{
    if(input.value === '') {
      ElMessage.error('回复不能为空！')
      return
    }
  await Guidances({userName:props.userName,isAdmin:true,message:input.value})
  input.value = ''
  dialogArray.value = await Guidances({userName:props.userName})
}
onMounted(async()=>{
    dialogArray.value = await Guidances({userName:props.userName})
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer){
    // border-radius: 15px;
    width: 33% !important;
    height: 100% !important;
}
:deep(.el-drawer__header){
  background-color: #ECF5FF;
  width: 100%;
  margin-bottom: 0px;
  padding-bottom: 10px;
  color: #409eff;
  border: 1px solid #a0cfff;
  border-radius: 5px;
}
.content{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .exhibitionArea{
  width: 100%;
  max-height:86vh;
  min-height:86vh;
  border: 1px solid #778899;
  border-radius: 10px;
  padding: 15px;
  overflow-y: auto;
  .dialogRight{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
    width: 100%;
    min-height: 40px;
    margin-bottom: 10px;
      span:nth-child(1){
        color: #409eff;
      }
      span:nth-child(2){
        background-color: antiquewhite;
        padding: 5px 8px;
        border: 1px solid #409eff;
        min-width: 50px;
        border-radius: 15px;
        word-wrap: break-word; 
        white-space: pre-wrap;
      }

  }
  .dialogLeft{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    min-height: 40px;
    margin-bottom: 10px;
      span:nth-child(1){
        color: #409eff;
      }
      span:nth-child(2){
        background-color: antiquewhite;
        padding: 5px 8px;
        border: 1px solid #409eff;
        min-width: 50px;
        border-radius: 15px;
        word-wrap: break-word; 
        white-space: pre-wrap;
      }

  }
}
.footer{
    padding: 20px;
    padding-top: 10px;
    justify-content: flex-end;
    height: 10vh;
    .input{
        display: flex;
    }
}
}
</style>